@mixin el-form-style {
  ::v-deep .el-form-item {
    display: inline-flex;
    margin-right: 0;
    margin-bottom: 0px;
    padding-right: 20px;

    .el-form-item__label {
      font-size: 16px;
      padding: 0 25px 0 0;
    }

    .el-form-item__content {
      flex: 1;
      margin-left: 0px !important;
    }

    .el-form-item__error {
      white-space: nowrap;
      font-size: 16px;
    }

    .el-input {
      &.el-input--medium {
        font-size: 15px;

        .el-input__inner {
          height: 38px;
          line-height: 38px;
          // background-color: #f2f3f5;
          // border: none;
        }
      }
      &.el-input__inner .el-input__inner {
        color: #606266;
      }
    }

    .el-input-number {
      &.el-input-number--medium {
        width: 100%;
      }
      &.is-controls-right[class*='medium'] [class*='decrease'] {
        line-height: 19px;
      }
    }

    .el-select,
    .el-cascader {
      width: 100%;
    }

    .el-radio {
      font-size: 16px;
      .el-radio__label {
        font-size: 16px;
      }
    }
  }
}

@mixin table-page-style {
  .app-container {
    height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
  }

  .search-box {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    border-bottom: 1px solid #f2f3f5;

    .form-box {
      // flex: 1;
      width: 100%;
      display: flex;

      :deep(.el-form) {
        flex: 1;

        .el-form-item {
          margin-right: 0;
          margin-bottom: 15px;
          padding-right: 20px;
          width: 320px;

          // width: 100%;
          &.collapse-item {
            width: auto;
          }
        }
      }
    }

    .btn-box {
      // width: 210px;
      width: 100px;
      padding-left: 15px;
      margin-bottom: 15px;
      border-left: 1px solid #f2f3f5;

      :deep(.el-button) {
        margin-top: 10px;

        &:first-child {
          margin-top: 0px;
        }

        & + .el-button {
          margin-left: 0px;
        }
      }
    }
  }

  .handle-box {
    flex-shrink: 0;
    margin: 10px 0;
  }

  .table-box {
    flex: 1;
    ::v-deep .el-table {
      .image {
        height: 80px;
      }
      .handle {
        .el-link {
          margin: 0 4px;
        }
      }
    }
  }

  .pagination-container {
    flex-shrink: 0;
  }
}

@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  } @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}
